
<template>
  <div class="back" :style="backgroundDiv">
    <div
      class="headbar"
      :style="{'background':themeColor}"
      :class="$store.state.app.collapse?'position-collapse-left':'position-left'"
    >

    <span class="toolbar">
<!--      管理员-->
      <el-menu
        class="el-menu-demo"
        :background-color="themeColor"
        :text-color="themeColor"
        :active-text-color="themeColor"
        mode="horizontal"
      >
        <el-menu-item index="5" v-if="user.name==='guest'" v-popover:popover-guest>
          <!-- 用户信息 -->
          <span class="user-info">{{ user.nickname }}</span>
           <el-popover ref="popover-guest" placement="bottom-end" trigger="click" :visible-arrow="false">
           <div class="personal-footer" @click="logout">
      <li class="fa fa-sign-out"></li>
      退出
    </div>
          </el-popover>

        </el-menu-item>
        <el-menu-item v-else v-popover:popover-personal index="6">
          <!-- 用户信息 -->
          <span class="user-info">{{ user.nickname }}</span>
          <el-popover ref="popover-personal" placement="bottom-end" trigger="click" :visible-arrow="false">
            <personal-panel :user="user"/>
          </el-popover>
        </el-menu-item>
      </el-menu>
    </span>

      <span class="kuang">
  <el-row>
    <el-button class="button" @click="EnterDatabaseHome();Num()">制药行业有毒有害化学品数据库</el-button>
    <el-button class="button" @click="EnterEvalute">制药加工处理过程关键点源环境释放量评估</el-button>
  </el-row>
  </span>


    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Action from '@/components/Toolbar/Action'
import NoticePanel from '@/views/Core/NoticePanel'
import MessagePanel from '@/views/Core/MessagePanel'
import PersonalPanel from '@/views/Core/PersonalPanel'
import LoginPanel from '@/views/Core/LoginPanel'
import Hamburger from '@/components/Hamburger'
import Cookies from "js-cookie"

export default {
  components: {
    Hamburger,
    Action,
    NoticePanel,
    MessagePanel,
    PersonalPanel,
    LoginPanel
  },
  perms: 'guest',
  data() {
    return {
      user: {
        name: 'guest',
        avatar: '',
        nickname: '游客',
        registeInfo: '注册时间：2018-12-20 '
      },
      activeIndex: '1',
      backgroundDiv: {
        backgroundImage: 'url(' + require('@/assets/uu.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'

      }

    }
  },

  mounted() {
    this.sysName = '印染加工处理过程关键点源环境释放量评估程序'

    var user = sessionStorage.getItem('user')
    var nickname = sessionStorage.getItem('nickname')
    if (user) {
      this.user.name = user
      this.user.nickname = nickname
    }
  },
  methods: {
    openWindow(url) {
      window.open(url)
    },
    selectNavBar(key, keyPath) {
      console.log(key, keyPath)
    },

    logout: function () {
      this.$confirm("确认退出吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          sessionStorage.removeItem("user")
          Cookies.remove("token")
          // this.$router.push("/")
          // this.$router.go(0);
          this.$api.login.logout().then((res) => {
            console.log("注销成功")
            this.$router.push("/")
            this.$router.go(0);
          }).catch(function (res) {
          })
        })
        .catch(() => {
        })
    },
    EnterDatabaseHome() {
      this.$router.push("/DatabaseHome")
    },
    EnterEvalute() {
      console.log('name:' + this.user.name)
      if(this.user.name ==='guest'){
        this.open()
      }else{
        this.$router.push("/evaluate/evaluate")
      }
    },
    open() {
      this.$alert('您暂时无权访问，请先注册', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${ action }`
          });
        }
      });
    }
  },
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor,
      collapse: state => state.app.collapse

    })
  }

}
</script>

<style scoped lang="scss">
.headbar {
  position: fixed; /*固定定位*/
  top: 0;
  right: 0;
  z-index: 1030;
  height: 60px;
  line-height: 60px;
  border-color: rgba(80, 190, 220, 0.8);
  border-left-width: 0px;
  border-left-style: solid;
}

.kuang {
  position: fixed;
  top: 340px;
  left: 0;
  right: 0;
  bottom: 450px;
}

.back{
  width: 100%;
  height: 100%;
}

.toolbar {
  float: right;
}
.button{
  width:430px;
  height:128px;
  margin-right: 70px;
  font-size:20px
}

.lang-item {
  font-size: 16px;
  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: pointer;
}

.lang-item:hover {
  font-size: 18px;
  background: #b0d6ce4d;
}

.user-info {
  font-size: 20px;
  color: #fff;
  cursor: pointer;

  img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 10px 0px 10px 10px;
    float: right;
  }
}

.badge {
  line-height: 18px;
}

.position-left {
  left: 0px;
}

.position-collapse-left {
  left: 0px;
}
</style>
